<template>
    <div>
        <span class="title1">研究生房源</span>
        <el-card style="margin-left: 15px;margin-right: 15px">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-select clearable v-model="query.communityId" placeholder="选择园区">
                        <el-option
                            v-for="item in roles1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select clearable v-model="query.buildingId" placeholder="选择楼栋">
                        <el-option
                            v-for="item in roles2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select clearable v-model="query.floor" placeholder="选择楼层">
                        <el-option
                            v-for="item in roles3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="7">
                    <el-button size="small" @click="getUserList" type="primary">查询</el-button>
                    <!--                    <el-button size="small" @click="removesBtn" type="danger">删除选中</el-button>
                                        <el-button icon="el-icon-upload2" @click="exportUsers" size="small" type="primary">导出数据</el-button>-->
                </el-col>
            </el-row>
            <el-table
                @selection-change="selectChange"
                :data="users"
                stripe
                style="width: 100%">
                <el-table-column
                    label="园区"
                    prop="num1">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.communityId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="楼栋"
                    prop="num2">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.buildingId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="楼层"
                    prop="num3">
                    <template slot-scope="scope">
                        <span class="teanName">{{ scope.row.floor }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="房间编号"
                    prop="num4">
                    <template slot-scope="scope">
                        <span class="teanName">{{ scope.row.roomId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="床位编号"
                    prop="num5">
                    <template slot-scope="scope">
                        <span class="teanName">{{ scope.row.bedId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="房间价格"
                    prop="price">
                    <template slot-scope="scope">
                        <span class="teanName">{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    prop="do">
                    <template slot-scope="scope">
                        <el-button
                            size="16px"
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)">释放床位
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="margin-top: 20px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNo"
                :page-sizes="[10, 20, 40, 100]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
<script src="//unpkg.com/vue@2/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script>
import {userList,releaseBed} from '../../../../api/eighth'
export default {
    name: 'eight',
    data: function () {
        return {
            total: 0,
            users: [],
            query: {
                communityId: '',
                buildingId: '',
                id: '',
                major: '',
                studentRole: '研究生',
                isLived: '1',
                floor: '',
                roomId: '',
                bedId: '',
                price: '',
                sn: ''
            },
            roles3: [{
                value: 1,
                label: '1F'
            }, {
                value: 2,
                label: '2F'
            }, {
                value: 3,
                label: '3F'
            }, {
                value: 4,
                label: '4F'
            }],
            roles2: [{
                value: 'A',
                label: 'A栋'
            }, {
                value: 'B',
                label: 'B栋'
            }, {
                value: 'C',
                label: 'C栋'
            }, {
                value: 'D',
                label: 'D栋'
            }, {
                value: 'E',
                label: 'E栋'
            }, {
                value: 'F',
                label: 'F栋'
            }],
            roles1: [{
                value: 'A',
                label: 'A园区'
            }, {
                value: 'B',
                label: 'B园区'
            }, {
                value: 'C',
                label: 'C园区'
            }, {
                value: 'D',
                label: 'D园区'
            }, {
                value: 'E',
                label: 'E园区'
            }, {
                value: 'F',
                label: 'F园区'
            }],
            // value: false
            dialogVisibleBatch: false,
            dialogVisibleAdd: false,
            selectUsers: [],
            input: '',
        }
    },
    methods: {
        getUserList () {
            this.query.studentRole = '研究生'
            userList(this.query).then(res => {
                this.users = res.data.records
                this.total = res.data.total
            })
        },
        handleSizeChange (value) {
            // 把页面大小重复赋值，然后重新获取数据
            this.query.pageSize = value
            this.getUserList()
        },
        handleCurrentChange (value) {
            this.query.pageNo = value
            this.getUserList()
        },
        handleChange (newValue) {
            // newValue 是开关状态变化后的值
            console.log('开关状态变为：', newValue)
            // 可以在这里执行其他逻辑，例如发送请求或者更新其他状态
        },
        handleCloseBatch (done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done()
                })
                .catch(_ => {
                })
        },
        handleCloseAdd (done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done()
                })
                .catch(_ => {
                })
        },
        selectChange (value) {
            // 这里的value就是选中的数据构成的数组
            console.info(value)
            this.selectUsers = value
        },
        handleEdit(index, row) {
            // 构造请求数据对象
            const requestData = {
                id: row.id, // 假设需要传递学生的 ID
                isLived: false // 假设需要修改的属性值
            };

            this.$confirm('确认释放床位吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送释放床位请求
                releaseBed(requestData).then(response => {
                    // 请求成功处理
                    this.$message({
                        message: '释放成功',
                        type: 'success'
                    });

                    // 从表格中删除释放成功的数据
                    this.users.splice(index, 1); // 删除当前行

                    // 可以在这里进行后续的数据更新等操作
                }).catch(error => {
                    // 请求失败处理
                    console.error('释放床位失败:', error);
                    this.$message.error('释放失败');
                });
            }).catch(() => {
                // 用户点击取消后的操作
                console.log('取消释放床位');
            });
        }
    },
    created () {
        this.getUserList()
    }
}
</script>

<style scoped>
@import "../../../../assets/styles/total/eighth.css";

</style>
